import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class CategoryBreed extends StatefulWidget {
  const CategoryBreed({Key? key}) : super(key: key);

  @override
  State<CategoryBreed> createState() => _CategoryBreedState();
}

class _CategoryBreedState extends State<CategoryBreed> with SingleTickerProviderStateMixin {
  late final TabController _controller;

  final List<String> tabs = ['主营品类', '辅营品类(选填)'];

  @override
  void initState() {
    _controller = TabController(length: tabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: BrnAppBar(
        backgroundColor: ColorsUtils.rgba(255, 110, 83, 1),
        elevation: 0,
        titleAlignment: Alignment.center,
        title: Text('选择品类', style: StylesUtils.customTextStyle(fontSize: Sizes.default18)),
        themeData: BrnAppBarConfig(
          iconSize: Sizes.default20,
          actionsStyle: BrnTextStyle(color: Colors.white),
          leadIconBuilder: () {
            return ToolsUtils.getAssetImageIcon('back.png');
          },
          leftAndRightPadding: Sizes.default10,
          titlePadding: EdgeInsets.zero,
        ),
        actions: BrnTextAction(
          '确定',
          iconPressed: onSure,
          themeData: BrnAppBarConfig(
              actionsStyle: BrnTextStyle(
                  color: Colors.white, fontSize: Sizes.default16, fontWeight: FontWeight.normal)),
        ),
        bottom: PreferredSize(
            preferredSize: Size(Get.width, 50),
            child: Container(
              color: Colors.white,
              alignment: Alignment.center,
              child: ToolsUtils.getClientTabBar(tabs, _controller),
            )),
      ),
      body: TabBarView(
        controller: _controller,
        children: const [BreedFirst(), BreedSecond()],
      ),
    );
  }

  void onSure() {
    /// 返回
    Get.back();
  }
}

class BreedFirst extends StatefulWidget {
  const BreedFirst({Key? key}) : super(key: key);

  @override
  State<BreedFirst> createState() => _BreedFirstState();
}

class _BreedFirstState extends State<BreedFirst> {
  List<_TreeMenu> trees = [];

  int firstIndex = 0;

  int secondIndex = 0;

  late ScrollController firstController;

  late ScrollController secondController;

  @override
  void initState() {
    super.initState();
    firstController = ScrollController()
      ..addListener(() {
        int index = firstController.offset ~/ Sizes.default50;
        if (index != firstIndex) {
          firstIndex = index;
          secondIndex = 0;
          setState(() {});
        }
      });

    secondController = ScrollController()
      ..addListener(() {
        int index = firstController.offset ~/ Sizes.default50;
        if (index != secondIndex) {
          secondIndex = index;
          setState(() {});
        }
      });

    trees.add(_TreeMenu(name: '水果', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '食材', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '母婴', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '宠物', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '超市便利', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '食品专营', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '日用百货', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '美妆百货', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '家用电器', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '数码3C', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
    trees.add(_TreeMenu(name: '电视', children: [
      _TreeMenu(name: '整装水果店'),
      _TreeMenu(name: '鲜切水果/果捞店'),
    ]));
  }

  @override
  void dispose() {
    firstController.dispose();
    secondController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: Sizes.default100,
          height: double.maxFinite,
          child: ListView.builder(
            itemBuilder: (BuildContext ctx, int index) {
              _TreeMenu menu = trees[index];
              return GestureDetector(
                onTap: () {
                  firstIndex = index;
                  secondIndex = 0;
                  firstController.animateTo(index * Sizes.default50,
                      duration: Duration(milliseconds: index * 300), curve: Curves.linear);
                  setState(() {});
                },
                child: Container(
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(left: Sizes.default10),
                  decoration:
                      BoxDecoration(color: index == firstIndex ? Colors.white : Colors.transparent),
                  child: Text(menu.name,
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15,
                          color:
                              index == firstIndex ? ColorsUtils.color000 : ColorsUtils.color797)),
                ),
              );
            },
            shrinkWrap: true,
            itemExtent: Sizes.default50,
            itemCount: trees.length,
            controller: firstController,
          ),
        ),
        Expanded(
            child: Container(
          height: double.maxFinite,
          decoration: const BoxDecoration(color: Colors.white),
          child: ListView.builder(
            itemBuilder: (BuildContext ctx, int index) {
              _TreeMenu menu = trees[firstIndex].children[index];
              return GestureDetector(
                onTap: () {
                  secondIndex = index;
                  secondController.animateTo(index * Sizes.default50,
                      duration: Duration(milliseconds: index * 300), curve: Curves.linear);
                  setState(() {});
                },
                child: Container(
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.only(left: Sizes.default15),
                  child: Text(menu.name,
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15,
                          color:
                              index == secondIndex ? ColorsUtils.color000 : ColorsUtils.color797)),
                ),
              );
            },
            shrinkWrap: true,
            itemExtent: Sizes.default50,
            itemCount: trees[firstIndex].children.length,
            controller: secondController,
          ),
        ))
      ],
    );
  }
}

class BreedSecond extends StatefulWidget {
  const BreedSecond({Key? key}) : super(key: key);

  @override
  State<BreedSecond> createState() => _BreedSecondState();
}

class _BreedSecondState extends State<BreedSecond> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

class _TreeMenu {
  String name;
  List<_TreeMenu> children;

  _TreeMenu({required this.name, this.children = const []});
}
